let count = 1;//编号
let length = 0;//题目个数
let optioncount = 5;//选项编号数
let editForm = document.getElementById('question-list');
let editAddButton = document.getElementById('edit-add-button');
let subjectObj;//问题集合
let subOptions = new Array(10);
let tet = 0;
let storage = window.localStorage;
let list = JSON.parse(storage.getItem("questionnaireList"));
let num = JSON.parse(storage.getItem("num"));//起始编号，要在列表页面设置
let storageID = 0;//传递参数
let questionnaire = {
  id: "1",
  state: "发布中",
  createTime: "2023-01-12 20:46:52",
  deadline: "2023-04-12",
  title: "这里是标题",
  questionList: [],
}
//初始化问卷questionnaire
function initData() {
  if(window.location.href.split("=")[1]  != null){
    storageID = window.location.href.split("=")[1];
    // console.log(storageID);
  }
  if (storageID > 0) {
    questionnaire = JSON.parse(storage.getItem(storageID)); //将storage的json取出   转化为string放到questionnaire
    if(questionnaire.questionList.length != 0){
      count = questionnaire.questionList.length+1;
      console.log(count);
    }
    updateQuestionList();
  } else {
    questionnaire.title = "我的问卷" + num;
    let d = new Date(); //Tue Dec 08 2020 10:22:56 GMT+0800 (中国标准时间)
    questionnaire.deadline = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + (d.getDate() + 1); //格式化日期 yyyy-mm-dd  天数加1
  }
  let inputTitle = document.getElementById("title");
  inputTitle.value = questionnaire.title;
  let deadline = document.getElementById("deadline");
  deadline.value = questionnaire.deadline;
}
//保存问卷
document.getElementById("save").addEventListener("click", function () {
  saveDataToStorage();
  // isNull();
});
//发布问卷
document.getElementById("publish").addEventListener("click", function () {
  publish();
});
//发布框时间更新
document.getElementById("btn").addEventListener("click", function () {
  document.getElementById("time").innerHTML = "（此问卷截至日期为" + document.getElementById("deadline").value + "）";
});
//获取上移点击事件
// 每次创建一个新题，则需要刷新页面
function refresh() {
  subjectObj = document.getElementsByClassName("subject");
  // console.log("subjectObj:"+subjectObj);
  length = subjectObj.length;
  //用于题目数组自增
  let u = 1;
  // 遍历每一题，并设置每一题的事件 
  for (let i = 1; i <= count; i++) {
    if (document.getElementById("up" + i) != null) {
      //鼠标移到题时变色和出现选项
      subjectObj[u - 1].addEventListener("mouseenter", function () {
        subOptions[u - 1] = document.getElementById("sub-options" + i);
        subOptions[u - 1].style.display = "block";
        // console.log(subjectObj[i-1]);
      });
      //鼠标移出题时变色和消失选项
      subjectObj[u - 1].addEventListener("mouseleave", function () {
        subOptions[u - 1] = document.getElementById("sub-options" + i);
        subOptions[u - 1].style.display = "none";
      });
      u++;
      //获取上移点击事件
      if (document.getElementById("up" + i) != null) {
        document.getElementById("up" + i).addEventListener("click", function () {
          // console.log("up"+i);
          up("up" + i);
        });
      }
      //获取下移点击事件
      if (document.getElementById("down" + i) != null) {
        document.getElementById("down" + i).addEventListener("click", function () {
          // console.log("down"+i);
          down("down" + i);
        });
      }
      //获取问题删除点击事件
      if (document.getElementById("deleting" + i) != null) {
        document.getElementById("deleting" + i).addEventListener("click", function () {
          // console.log("deleting"+i);
          deleting("deleting" + i);
        });
      }
      //获取选项删除点击事件
      for (let j = 1; j <= optioncount; j++) {
        // console.log("deleteOption"+i+""+j);
        if (document.getElementById("deleteOption" + i + "" + j) != null) {
          document.getElementById("deleteOption" + i + "" + j).addEventListener("click", function () {
            deleteOption("deleteOption" + i + "" + j);
          });
        } else {
          // console.log("deleteOption"+i+""+j+"为空");
        }
      }
      //获取复用点击事件
      if (document.getElementById("multiplex" + i) != null) {
        document.getElementById("multiplex" + i).addEventListener("click", function () {
          // console.log("dmultiplex"+i);
          multiplex("multiplex" + i);
        });
      }
    }
  }
}
//上移方法
function up(id) {
  // 当前行的名称列值
  let html = document.getElementById(id);
  htm1InnerHTML = html.parentElement.parentElement.children[1].innerHTML;
  // console.log("up当前行:"+htm1InnerHTML);
  //判断是否为第一题
  if (html.parentElement.parentElement.previousElementSibling == null) {
    alert(' 当前最大值，无需上移');
  } else {
    //上一行的名称列值
    htm2InnerHTML = html.parentElement.parentElement.previousElementSibling.children[1].innerHTML;
    // console.log("up上一行:"+htm2InnerHTML);
    //求questionnaire中数据上移数据的位置
    let upid;
    let htmlLast = document.getElementById(id).parentElement.parentElement;
    for (let i = 0; i < length; i++) {
      console.log("subjectObj" + i + subjectObj[i]);
      if (subjectObj[i] == htmlLast) {
        upid = i;
      }
    }
    let up1 = questionnaire.questionList[upid];
    let up2 = questionnaire.questionList[upid - 1];
    questionnaire.questionList.splice(upid - 1, 2, up1, up2);
    // 上一行的值被赋值为当前行的值
    html.parentElement.parentElement.previousElementSibling.children[1].innerHTML = htm1InnerHTML;
    // 当前行的名称列的值为上一行的值
    html.parentElement.parentElement.children[1].innerHTML = htm2InnerHTML;
  }
}
//下移方法
function down(id) {
  // 当前行的名称列值
  let html = document.getElementById(id);
  htm1InnerHTML = html.parentElement.parentElement.children[1].innerHTML;
  // console.log("down当前行:"+htm1InnerHTML);
  //判断是否为最后一题
  if (html.parentElement.parentElement.nextElementSibling == null) {
    alert('当前最小值，无需下移');
  } else {
    //下一行的名称列值
    htm2InnerHTML = html.parentElement.parentElement.nextElementSibling.children[1].innerHTML;
    // console.log("down下一行:"+htm2InnerHTML);
    //求questionnaire中数据下移数据的位置
    let downid;
    let htmlLast = document.getElementById(id).parentElement.parentElement;
    for (let i = 0; i < length; i++) {
      console.log("subjectObj" + i + subjectObj[i]);
      if (subjectObj[i] == htmlLast) {
        downid = i;
      }
    }
    let down1 = questionnaire.questionList[downid];
    let down2 = questionnaire.questionList[downid + 1];
    questionnaire.questionList.splice(downid, 2, down2, down1);
    // 下一行的值被赋值为当前行的值
    html.parentElement.parentElement.nextElementSibling.children[1].innerHTML = htm1InnerHTML;
    // 当前行的名称列的值为下一行的值
    html.parentElement.parentElement.children[1].innerHTML = htm2InnerHTML;
  }

}
//复用
function multiplex(id) {
  // 当前最后一行的名称列值
  let htmlLast = document.getElementById("multiplex" + (count - 1));
  console.log("htmlLast：");
  console.log(htmlLast);
  //复制最后一题的内容
  htm1InnerHTML = htmlLast.parentElement.parentElement.children[1].innerHTML;
  console.log("htm1InnerHTML：");
  console.log(htm1InnerHTML);
  if (length < 10) {
    editForm.innerHTML +=
      "<div class=\"subject\" id=\"subject" + count + "\">" +
      "<br>" +
      "<div class=\"question\">" +
      htm1InnerHTML +
      "</div>" +
      "<div id=\"sub-options" + count + "\" class=\"sub-options\">" +
      "<input type=\"button\" id=\"deleting" + count + "\" name=\"deleting\" value=\"删除\">" +
      "<input type=\"button\" id=\"multiplex" + count + "\" name=\"multiplex\" value=\"复用\">" +
      "<input type=\"button\" id=\"down" + count + "\" name=\"down\" value=\"下移\">" +
      "<input type=\"button\" id=\"up" + count + "\" name=\"up\" value=\"上移\");\">" +
      "</div>" +
      "<br>" +
      "</div>";
    count++;
    refresh();
    //复用questionnaire中的数据
    let multiplexid;
    let htmlLast = document.getElementById(id).parentElement.parentElement;
    // console.log("htmlLast"+htmlLast);
    //求questionnaire中要删除数据的位置
    for (let i = 0; i < length; i++) {
      // console.log("subjectObj"+i+subjectObj[i]);
      if (subjectObj[i] == htmlLast) {
        multiplexid = i;
      }
    }
    let multiplexObj = questionnaire.questionList[multiplexid];
    questionnaire.questionList.splice(multiplexid, 0, multiplexObj);
    //循环交换题目内容
    for (let i = 2; ; i++) {
      if ("multiplex" + (count - i) == id) {
        // console.log("multiplex"+(count-i));
        break;
      }
      htmlLast = document.getElementById("multiplex" + (count - i));
      let htmlFront = document.getElementById("multiplex" + (count - i - 1));
      htmlLast.parentElement.parentElement.children[1].innerHTML = htmlFront.parentElement.parentElement.children[1].innerHTML;
    }
  } else {
    alert('题目最多10题');
  }

}
// 问题删除
function deleting(id) {
  // 当前行的名称列值
  let del;
  let htmlLast = document.getElementById(id).parentElement.parentElement;
  // console.log("htmlLast"+htmlLast);
  //求questionnaire中要删除数据的位置
  for (let i = 0; i < length; i++) {
    // console.log("subjectObj"+i+subjectObj[i]);
    if (subjectObj[i] == htmlLast) {
      del = i;
    }
  }
  htmlLast.outerHTML = null;
  //questionnaire数据删除
  questionnaire.questionList.splice(del, 1);
  refresh();
}
//选项删除
function deleteOption(id) {
  // 当前行的名称列值
  // let del;
  let htmlOption = document.getElementById(id).parentElement;
  // console.log("htmlOption"+htmlOption);
  htmlOption.outerHTML = null;
  // saveData();
  refresh();
}
//选项添加
function addOption(id) {
  // console.log(id);
  let htmlOption = document.getElementById(id).parentElement.parentElement.children[2].firstChild;
  // console.log("htmlOption"+htmlOption.innerHTML);
  if (htmlOption.getAttribute("class") == "radio") {
    htmlOption.innerHTML +=
      "<div><input type=\"radio\" name=\"选项" + optioncount + "\" value=0><input type=\"text\" value=\"选项" + optioncount + "\"><span id=\"deleteOption" + count + "" + optioncount + "\" onclick=\"deleteOption('deleteOption" + count + "" + optioncount + "')\" class=\"icon iconfont\">&nbsp;-</span></div>";
    // console.log("deleteOption"+count+""+optioncount);
  } else {
    htmlOption.innerHTML +=
      "<div><input type=\"checkbox\" name=\"选项" + optioncount + "\" value=0><input value=\"选项" + optioncount + "\"><span id=\"deleteOption" + count + "" + optioncount + "\" onclick=\"deleteOption('deleteOption" + count + "" + optioncount + "')\" class=\"icon iconfont\">&nbsp;-</span></div>";
    // console.log("deleteOption"+count+""+optioncount);
  }
  optioncount++;
  saveData();
  refresh();
}
//点击添加问题按钮添加三种题型
document.getElementById("edit-add-problem").addEventListener("click", function () {
  editAddButton.style.display = "block";
});
//单选题添加
document.getElementById("radio").addEventListener("click", function () {
  //题目最多10题
  if (length < 10) {
    editForm.innerHTML +=
      "<div class=\"subject\" id=\"subject" + count + "\">" +
      "<br>" +
      "<div class=\"question\">" +
      "<div class=\"question-title\">" +
      "<label>Q" + count + "&nbsp;&nbsp;单选题</label><input value=\"请输入问题\"><span id=\"addOption" + count + "\" onclick=\"addOption('addOption" + count + "')\" class=\"icon iconfont\">&#xe889;</span><br>" +
      "</div>"+
      "<br>" +
      "<div class=\"question-option\">"+
      "<div class=\"radio\">" +
      "<div><input  type=\"radio\" name=\"选项1\" value=0 name=\"radio\"><input type=\"text\" value=\"选项一\"><span id=\"deleteOption" + count + "1\" onclick=\"deleteOption('deleteOption" + count + "1')\" class=\"icon iconfont\">&nbsp;-</span></div>" +
      "<div><input  type=\"radio\" name=\"选项2\" value=0 name=\"radio\"><input type=\"text\" value=\"选项二\"><span id=\"deleteOption" + count + "2\" onclick=\"deleteOption('deleteOption" + count + "2')\" class=\"icon iconfont\">&nbsp;-</span></div>" +
      "</div>" +
      "</div>" +
      "</div>" +
      "<div id=\"sub-options" + count + "\" class=\"sub-options\">" +
      "<input type=\"button\" id=\"deleting" + count + "\" name=\"deleting\" value=\"删除\">" +
      "<input type=\"button\" id=\"multiplex" + count + "\" name=\"multiplex\" value=\"复用\">" +
      "<input type=\"button\" id=\"down" + count + "\" name=\"down\" value=\"下移\">" +
      "<input type=\"button\" id=\"up" + count + "\" name=\"up\" value=\"上移\");\">" +
      "</div>" +
      "<br>" +
      "</div>";
    count++;
    questionnaire.questionList.push(
      {
        title: "单选题",
        type: 1,
        datas: [
          {
            name: "选项1",
            value: 0,
          },
          {
            name: "选项2",
            value: 0,
          },
        ],
      });
    refresh();
  } else {
    alert('题目最多10题');
  }

});
//多选题添加
document.getElementById("checkbox").addEventListener("click", function () {
  //题目最多10题
  if (length < 10) {
    editForm.innerHTML +=
      "<div class=\"subject\" id=\"subject" + count + "\">" +
      "<br>" +
      "<div class=\"question\">" +
      "<div class=\"question-title\">" +
      "<label>Q" + count + "&nbsp;&nbsp;多选题</label><input value=\"请输入问题\"><span id=\"addOption" + count + "\" onclick=\"addOption('addOption" + count + "')\"  class=\"icon iconfont\">&#xe889;</span><br>" +
      "</div>"+
      "<br>" +
      "<div class=\"question-option\">"+
      "<div class=\"checkbox\">" +
      "<div><input type=\"checkbox\" name=\"选项1\" value=0><input value=\"选项一\"><span id=\"deleteOption" + count + "1\" onclick=\"deleteOption('deleteOption" + count + "1')\"  class=\"icon iconfont\">&nbsp;-</span></div>" +
      "<div><input type=\"checkbox\" name=\"选项2\" value=0><input value=\"选项二\"><span id=\"deleteOption" + count + "2\" onclick=\"deleteOption('deleteOption" + count + "2')\" class=\"icon iconfont\">&nbsp;-</span></div>" +
      "<div><input type=\"checkbox\" name\"选项3\" value=0><input value=\"选项三\"><span id=\"deleteOption" + count + "3\" onclick=\"deleteOption('deleteOption" + count + "3')\" class=\"icon iconfont\">&nbsp;-</span></div>" +
      "<div><input type=\"checkbox\" name=\"选项4\" value=0><input value=\"选项四\"><span id=\"deleteOption" + count + "4\" onclick=\"deleteOption('deleteOption" + count + "4')\" class=\"icon iconfont\">&nbsp;-</span></div>" +
      "</div>" +
      "</div>" +
      "</div>" +
      "<div id=\"sub-options" + count + "\" class=\"sub-options\">" +
      "<input type=\"button\" id=\"deleting" + count + "\" name=\"deleting\" value=\"删除\">" +
      "<input type=\"button\" id=\"multiplex" + count + "\" name=\"multiplex\" value=\"复用\">" +
      "<input type=\"button\" id=\"down" + count + "\" name=\"down\" value=\"下移\">" +
      "<input type=\"button\" id=\"up" + count + "\" name=\"up\" value=\"上移\">" +
      "</div>" +
      "<br>" +
      "</div>";
    count++;
    questionnaire.questionList.push(
      {
        title: "多选题",
        type: 2,
        datas: [
          {
            name: "选项1",
            value: 0,
          },
          {
            name: "选项2",
            value: 0,
          },
          {
            name: "选项3",
            value: 0,
          },
          {
            name: "选项4",
            value: 0,
          },
        ],
      });
    refresh();
  } else {
    alert('题目最多10题');
  }

});
//文本题添加
document.getElementById("text").addEventListener("click", function () {
  //题目最多10题
  if (length < 10) {
    editForm.innerHTML +=
      "<div class=\"subject\" id=\"subject" + count + "\">" +
      "<br>" +
      "<div class=\"question\">" +
      "<div class=\"question-title\">" +
      "<label>Q" + count + "&nbsp;&nbsp;文本题</label><input value=\"请输入问题\">" +
      "<div style=\"float: right;\"><input type=\"checkbox\"><span>&nbsp;&nbsp;此题是否必填</span></input></div><br>" +
      "</div>"+
      "<br>"+
      "<div class=\"text\">"+
      "<textarea id=\"text\" class=\"text\" cols=\"50\" rows=\"5\" name=\"\" id=\"\" value=\"\" placeholder=\"请在此回答，尝试一下\"></textarea>" +
      "</div>" +
      "</div>" +
      "<div id=\"sub-options" + count + "\" class=\"sub-options\">" +
      "<input type=\"button\" id=\"deleting" + count + "\" name=\"deleting\" value=\"删除\">" +
      "<input type=\"button\" id=\"multiplex" + count + "\" name=\"multiplex\" value=\"复用\">" +
      "<input type=\"button\" id=\"down" + count + "\" name=\"down\" value=\"下移\">" +
      "<input type=\"button\" id=\"up" + count + "\" name=\"up\" value=\"上移\">" +
      "</div>" +
      "<br>" +
      "</div>";
    questionnaire.questionList.push(
      {
        title: "文本题",
        type: 3,
        datas: [
          {
            value: 0,
          },
        ],
        optional: 0,//1必填  0选填
      });
    count++;
    refresh();
  } else {
    alert('题目最多10题');
  }

});
//发布问卷确认框提醒
const myDialog = document.getElementById("my-dialog");
const quit = document.getElementById("quit");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  myDialog.setAttribute("visible", "1")
});
quit.addEventListener("click", () => {
  myDialog.setAttribute("visible", "0")
});

function saveData() { //保存问卷标题和截止时间和选项到questionnaire
  console.log("saveData");
  questionnaire.title = document.getElementById("title").value;
  questionnaire.deadline = document.getElementById("deadline").value;
  let questionDiv = editForm.children; //获取问题列表数组
  for (i = 0; i < questionDiv.length; i++) {  //questionnaire.questionList数组与questionDiv数组下标一一对应
    console.log("saveDataFor");
    let questionObj = questionDiv[i]; //根据下标获取questionDiv数组对应数据
    let question = questionnaire.questionList[i]; //根据下标获取questionnaire.questionList数组对应数据
    // console.log(questionObj.children[1].children[0].children[1].value.toString());
    question.title = questionObj.children[1].children[0].children[1].value.toString(); //保存选项的标题
    // console.log(questionObj.children[1].children[2]);
    // console.log("question.title:");
    // console.log(questionObj.children[1].children[0].children[1].value.toString());
    // console.log("option:");
    // console.log(questionObj.children[1].toString);
    // console.log(questionObj.children[1].children[2].toString);
    let option = questionObj.children[1].children[2].firstChild; //获取选项
    // console.log(option.getAttribute("class"));
    let optionList = option.children;//获取选项数组
    //  console.log(optionList);
    let answer = question.datas;//获取questionnaire选项数组
    // console.log(option.getAttribute("class"));
    if (option.getAttribute("class") === "text") { //通过class属性判断是文本题
      if (questionObj.children[1].children[0].children[2].firstChild.checked) {  //此题是否必填 是否选中
        question.optional = 0;
        //  console.log("是");
      } else {
        question.optional = 1;
        // console.log("否");
      }
    } else if (option.getAttribute("class") === "radio"
      || option.getAttribute("class") === "checkbox") {//通过class属性判断是单选题，或多选题
      for (j = 0; j < optionList.length; j++) {  //遍历数组，从下标1开始
        let optionListObj = optionList[j];
        // console.log("optionListObj.innerHTML:"+optionListObj.innerHTML);
        let inputsObj = optionListObj.childNodes;//inputs
        let inputValue = inputsObj[0];
        let inputName = inputsObj[1];
        // console.log("inputValue:"+inputValue.name.toString());
        // console.log("inputName:"+inputName.name.toString());
        // console.log(inputObj.value.toString());
        let item = {
          name: inputName.value.toString(),
          value: inputValue.value.toString(),
        }
        answer[j] = item;
        console.log(answer[j]);
      }
    }
  }
  // console.log(questionnaire);
}
//判断问卷是否有空值
function isNull() {
  saveData();
  if (document.getElementById("deadline").value.toString() == "" || document.getElementById("title").value.toString() == "") {
    return true;
  }
  let questionDiv = editForm.children; //获取问题列表数组
  for (i = 0; i < questionDiv.length; i++) {  //questionnaire.questionList数组与questionDiv数组下标一一对应
    let questionObj = questionDiv[i]; //根据下标获取questionDiv数组对应数据
    if (questionObj.children[1].children[0].children[1].value.toString() == "") {//保存选项的标题是否为空
      return true;
    }
    let option = questionObj.children[1].children[2]; //获取选项
    let optionList = option.children;//获取选项数组
    if (option.getAttribute("class") === "radio"
      || option.getAttribute("class") === "checkbox") {//通过class属性判断是单选题，或多选题
      for (j = 0; j < optionList.length; j++) {  //遍历数组，从下标1开始
        let optionObj = optionList[j];
        let inputsObj = optionObj.childNodes;//inputs
        let inputObj = inputsObj[1];
        // console.log(inputObj);
        if (inputObj.value.toString() == "") {
          return true;
        }
      }
    }
  }
  return false;
}
//判断当前日期是否大于截止日期
function isearly() {
  let deadline = document.getElementById("deadline").value;
  let time1 = Date.parse(new Date(Date.parse(deadline)));
  let time2 = Date.parse(Date());
  if (time1 <= time2) return true;
  return false;
}

//保存问卷questionnaire到storage
function saveDataToStorage() {
  //     console.log("save");
  saveData();
  if (questionnaire.questionList.length < 1) {
    alert("问卷最少要有一个问题");
  } else {
    if (isNull()) {
      alert("问卷有地方为空值");
    } else {
      questionnaire.state = "未发布";
      if (storageID == 0) {
        let time = new Date();
        questionnaire.createTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();//格式化日期 yyyy-mm-dd
        list.push({ "id": num });
        storage.setItem("questionnaireList", JSON.stringify(list));
        storage.setItem(num, JSON.stringify(questionnaire));
        num++;
        storage.setItem("num", JSON.stringify(num));
        alert("新建成功");
      } else {
        storage.setItem(storageID, JSON.stringify(questionnaire));
        alert("更改成功");
      }
      window.location.href = "/view/questionnaire-list/questionnaire-list.html";
    }
  }
}
//发布问卷
function publish() {
  // console.log(publish);
  saveData();
  if (questionnaire.questionList.length < 1) {
    alert("问卷最少要有一个问题");
  } else {
    if (isNull()) {
      alert("问卷存在空值");
    } else {
      if (isearly()) {
        alert("截止日期必须在当前时间之后");
      } else {
        questionnaire.state = "发布中";
        if (storageID == 0) {
          let time = new Date();
          questionnaire.createTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();//格式化日期 yyyy-mm-dd
          list.push({ "id": num });
          storage.setItem("questionnaireList", JSON.stringify(list));
          storage.setItem(num, JSON.stringify(questionnaire));
          num++;
          storage.setItem("num", JSON.stringify(num));
          alert("新建发布成功");
        } else {
          storage.setItem(storageID, JSON.stringify(questionnaire));
          alert("更改发布成功");
        }
        window.location.href = "/view/questionnaire-list/questionnaire-list.html";
      }
    }
  }
}
//加载编辑页面
function createItem(k, ql) {
  // console.log('createItem');
  let questionList = document.getElementById("question-list");

  let subject = document.createElement('div');
  subject.setAttribute('class', 'subject');
  subject.setAttribute('id','subject'+(k + 1));
  let question = document.createElement('div');
  question.setAttribute('class', 'question');

  let questionTitle = document.createElement('div');
  questionTitle.setAttribute('class', 'question-title');
  let d1 = document.createElement('label');
  if (ql.type == 1) {
      d1.innerHTML = "Q" + (k + 1) + "  单选题";
  } else if (ql.type == 2) {
      d1.innerHTML = "Q" + (k + 1) + "  多选题";
  } else if (ql.type == 3) {
      d1.innerHTML = "Q" + (k + 1) + "  文本题";
  }
  questionTitle.appendChild(d1);
  let titleInput = document.createElement('input');
  titleInput.setAttribute('value', ql.title);
  questionTitle.appendChild(titleInput);
  if(ql.type != 3){
    let span = document.createElement('span');
    span.innerHTML="";
    span.setAttribute('id','addOption'+(k+1));
    span.setAttribute('onclick','addOption(\'addOption'+(k+1)+'\')');
    span.setAttribute('class','icon iconfont');
    questionTitle.appendChild(span);
  }else{
    let questionOptional = document.createElement('div');
      let optioninput = document.createElement('input');
      optioninput.type = "checkbox";
      if (ql.optional == 0) {
          optioninput.checked = "true";
      }
      let  optionspan = document.createElement('span');
       optionspan.innerText = "此题是否必填";
      questionOptional.appendChild(optioninput);
      questionOptional.appendChild( optionspan);
      questionOptional.style = "float: right;";
      questionTitle.appendChild(questionOptional);
  }
  questionTitle.appendChild(document.createElement('br'));
  let questionOption = document.createElement('div');
  questionOption.setAttribute('class', 'question-option');
  if (ql.type == 3) {
      let div1 = document.createElement('div');
      div1.setAttribute("class", "text");
      let text1 = document.createElement('textarea');
      text1.setAttribute("cols", "50");
      text1.setAttribute("rows", "5");
      text1.setAttribute("name", "");
      text1.setAttribute("id", "text");
      text1.setAttribute("value", "");
      text1.setAttribute("placeholder", "请在此回答，尝试一下");
      // text1.value = ql.answer[0].text;
      div1.appendChild(text1);
      questionOption.appendChild(div1);
  } else {
      let div1 = document.createElement('div');
      let typeObj;
      if(ql.type == 1){
        typeObj = "radio";
      }else if(ql.type == 2){
        typeObj = "checkbox";
      }
      div1.setAttribute("class", typeObj);
      // let input2 = document.createElement('input');
      // input2.setAttribute("type","checkbox");
      // input2.setAttribute("")

      // div1.appendChild(input2);

      for (i = 0; i < ql.datas.length; i++) {
          let div2 = document.createElement('div');
          let input1 = document.createElement('input');
          input1.type = typeObj;
          input1.value = ql.datas[i].value;
          input1.name = ql.datas[i].name;
          div2.appendChild(input1);

          let input2 = document.createElement('input');
          input2.type = "text";
          input2.setAttribute('value',ql.datas[i].name);
          // input2.value = ql.datas[i].name;
          // console.log(ql.datas[i].name);
          div2.appendChild(input2);
          let span1 = document.createElement('span');
          span1.innerHTML = " -";
          span1.setAttribute('id', "deleteOption"+i);
          span1.setAttribute('onclick', "deleteOption\(\'deleteOption"+i+"\'\)");
          span1.setAttribute('class', "icon iconfont"); 
          div2.appendChild(span1);

          div1.appendChild(div2);
      }
      questionOption.appendChild(div1);
  }
  let questionEdit = document.createElement('div');
  questionEdit.setAttribute('id', 'sub-options'+(k+1));
  questionEdit.setAttribute('class', 'sub-options');
  questionEdit.setAttribute('style', 'display: none;');
  // if (k != 0) {
      let deletingInput = document.createElement('input');
      deletingInput.setAttribute('type',"button");
      deletingInput.setAttribute('id',"deleting"+(k+1));
      deletingInput.setAttribute('name',"deleting");
      deletingInput.setAttribute('value',"删除");
      questionEdit.appendChild(deletingInput);
  // }
  // if (k < data.questionList.length - 1) {
    let multiplexInput = document.createElement('input');
    multiplexInput.setAttribute('type',"button");
    multiplexInput.setAttribute('id',"multiplex"+(k+1));
    multiplexInput.setAttribute('name',"multiplex");
    multiplexInput.setAttribute('value',"复用");
    questionEdit.appendChild(multiplexInput);
  // }

    let downInput = document.createElement('input');
    downInput.setAttribute('type',"button");
    downInput.setAttribute('id',"down"+(k+1));
    downInput.setAttribute('name',"down");
    downInput.setAttribute('value',"下移");
    questionEdit.appendChild(downInput);  

    let upInput = document.createElement('input');
    upInput.setAttribute('type',"button");
    upInput.setAttribute('id',"up"+(k+1));
    upInput.setAttribute('name',"up");
    upInput.setAttribute('value',"上移");
    questionEdit.appendChild(upInput);

  question.appendChild(questionTitle);
  question.appendChild(document.createElement('br'));
  question.appendChild(questionOption);

  subject.appendChild(document.createElement('br'));
  subject.appendChild(question);
  subject.appendChild(questionEdit);
  subject.appendChild(document.createElement('br'));
  questionList.appendChild(subject);
}
//更新questionList
function updateQuestionList() { 
  // console.log("updateQuestionList");
  let questionList = document.getElementById("question-list");
  while (questionList.firstChild) {
      questionList.removeChild(questionList.firstChild);
  }
  for (let i = 0; i < questionnaire.questionList.length; i++) {
      // console.log(i+"号");
      // console.log(questionnaire.questionList[i]);
      createItem(i, questionnaire.questionList[i]);
  }
  refresh();
}